<template>
    <div class="login">
        <div>
            <van-field v-model="value" :label="文本" :placeholder="输入框内容右对齐" input-align="left"/>
            <van-field v-model="value" :label="文本" :placeholder="输入框内容右对齐" input-align="left"/>
        </div>
        <Back @back="back"/>
    </div>
</template>

<script>
import Back from "@/components/public/Back";
import { vuexData } from "@/assets/js/mixin";
export default {
  name: "Login",
  mixins: [vuexData],
  data() {
    return {
      nickname: "",
      password: "",
      tip: "",
      timer: 0,
      regLoding: false,
      loginLoding: false,
      verify: this.Api.getAverify(),
      verifyTxt: "",
      sms: "",
      phone: "",
      retry: "", // 60秒倒计时
      dataTimer: 10 // 60秒倒计时
    };
  },
  components: {
    Back
  },

  methods: {
    // 更换验证码
    async replaceVerify() {
      this.$refs.eleVerify["src"] = this.Api.getAverify();
    },
    login(flag) {
      if (!this.nickname || !this.password) {
        this.$toast("请输入用户名或者密码");
        return;
      }
      if (!this.verifyTxt) {
        this.$toast("请输入验证码");
        return;
      }
      if (this.verifyTxt.length < 4) {
        this.$toast("请输入正确的验证码");
        return;
      }
      if (!flag) {
        // 登录
        this.register(false);
      } else {
        // 注册
        this.register(true);
      }
    },

    async register(flag) {
      if (flag) {
        //  注册
        try {
          this.regLoding = true;
          const { data } = await this.Api.register(
            this.nickname,
            this.password,
            this.verifyTxt
          );
          if (data.code == 200) {
            this.setName(data.userInfo);
            // this.setToken(data.token)
            setTimeout(() => {
              this.$router.go(-1);
            }, 1500);
          } else {
            setTimeout(() => {
              this.verifyTxt = "";
              this.replaceVerify();
            }, 600);
          }
          this.regLoding = false;
          this.$toast(data.msg);
        } catch (error) {
          console.log(error);

          this.$toast("网络错误");
          this.regLoding = false;
          this.replaceVerify();
        }
      } else {
        // 登录
        try {
          this.loginLoding = true;
          const { data } = await this.Api.login(
            this.nickname,
            this.password,
            this.verifyTxt
          );
          if (data.code == 200) {
            this.setName(data.userInfo);
            // this.setToken(data.token)
            setTimeout(() => {
              this.$router.go(-1);
            }, 1500);
          } else {
            setTimeout(() => {
              this.verifyTxt = "";
              this.replaceVerify();
            }, 600);
          }
          this.loginLoding = false;
          this.$toast(data.msg);
        } catch (error) {
          this.$toast("网络错误");
          this.loginLoding = false;
          this.replaceVerify();
        }
      }
    },

    // 发送验证码
    async sendCode() {
      try {
        if (
          !this.phone ||
          this.phone.length != 11 ||
          !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)
        ) {
          return this.$toast("请输入正确的手机号");
        }
        const { data } = await this.Api.codeMsg(this.phone);
        if (data.code == 200) {
          this.dataTimer = 60;
          let t = setInterval(() => {
            if (this.dataTimer <= 0) {
              this.retry = "";
              clearInterval(t);
              return;
            }
            this.retry = this.dataTimer--;
          }, 1000);
        } else if (data.code == -2) {
          let t = setInterval(() => {
            if (data.timer <= 0) {
              this.retry = "";
              clearInterval(t);
              this.dataTimer = 60;
              return;
            }
            this.retry = data.timer--;
          }, 1000);
        }
        this.$toast(data.msg);
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.login-warpper >>> .van-cell--center {
    padding-left: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.login-warpper >>> .van-hairline--top-bottom:after {
    border: 0;
}

.login-warpper >>> .van-field__control::-webkit-input-placeholder {
    color: #D8D8D8;
    font-size: 15px;
}

.login {
    height: 100%;
    background: #EFEFEF;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;

    .login-warpper {
        z-index: 10;

        .login-img {
            width: 100%;
            height: 100%;
        }

        .form {
            width: 90%;
            margin: 0 auto;
            background: #fff;
            position: absolute;
            top: 17%;
            left: 50%;
            transform: translateX(-50%);
            padding: 7px;
            box-shadow: -2px 3px 23px 1px rgba(0, 0, 0, 0.1);

            .form-cont {
                padding: 8px;

                .login-title {
                    letter-spacing: 1px;
                    font-size: 20px;
                    margin: 0 0 30px 0;
                    color: #000000;
                }

                .form-group {
                    margin-bottom: 30px;

                    .van-button {
                        height: 45px;
                        line-height: 45px;
                        font-size: 14px;
                        padding: 0 15px;
                        width: 100px;
                    }

                    .sr-only {
                        position: absolute;
                        width: 1px;
                        height: 1px;
                        padding: 0;
                        margin: -1px;
                        overflow: hidden;
                        clip: rect(0, 0, 0, 0);
                        border: 0;
                        font-size: 14px;
                        font-weight: 300;
                        font-family: 'Open Sans', Arial, sans-serif !important;
                    }

                    .form-control {
                        font-size: 16px;
                        font-weight: 300;
                        width: 100%;
                        display: block;
                        height: 50px;
                        padding-left: 0;
                        padding-right: 0;
                        border: none;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        -o-box-shadow: none;
                        box-shadow: none;
                        -webkit-border-radius: 0px;
                        -moz-border-radius: 0px;
                        -ms-border-radius: 0px;
                        border-radius: 0px;
                        -moz-transition: all 0.3s ease;
                        -o-transition: all 0.3s ease;
                        -webkit-transition: all 0.3s ease;
                        -ms-transition: all 0.3s ease;
                        transition: all 0.3s ease;
                        font-family: 'Open Sans', Arial, sans-serif !important;
                        color: #555;

                        &:focus {
                            border-bottom: 1px solid rgba(0, 0, 0, 0.4);
                        }
                    }

                    input::-webkit-input-placeholder {
                        color: #D8D8D8;
                        font-size: 15px;
                    }

                    .btn-primary {
                        height: 50px;
                        padding-right: 20px;
                        padding-left: 20px;
                        border: none;
                        background: #33cccc;
                        color: #ffffff;
                        box-shadow: -1px 5px 10px -1px rgba(51, 204, 204, 0.4);
                        display: inline-block;
                        padding: 6px 12px;
                        margin-bottom: 0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.42857143;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: middle;
                        display: inline-block;
                        padding: 6px 14px;
                        margin-bottom: 0;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.42857143;
                        text-align: center;
                        white-space: nowrap;
                        vertical-align: middle;
                        -ms-touch-action: manipulation;
                        touch-action: manipulation;
                        cursor: pointer;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        background-image: none;
                        border: 1px solid transparent;
                        border-radius: 4px;

                        &:active, &:focus, &:hover {
                            color: #ffffff;
                            background: #47d1d1 !important;
                            outline: none;
                            border-color: #122b40;
                            box-shadow: inset 0 1.5px 2.5px rgba(0, 0, 0, 0.125);
                        }
                    }

                    .reg {
                        box-shadow: -1px 5px 10px -1px rgba(255, 0, 128, 0.4);
                    }
                }

                .verify {
                    display: flex;
                    align-items: center;
                    margin-top: 20px;

                    label {
                        flex: 0 0 20%;
                    }

                    .verify-input {
                        flex: 0 0 45%;
                        margin-right: 5%;
                        height: 40px;
                    }

                    .col-sm-10 {
                        flex: 1;
                    }
                }
            }
        }
    }
}
</style>

